<template>
<div>
  <h1>人员列表</h1>
  <h3>Count组件的和为：{{sum}}</h3>
  <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
  <input type="text" placeholder="请输入名字" v-model="name">
  <button @click="add(name)">添加</button><br>
  <button @click="addPersonWang(name)">添加一个姓王的人</button>
  <button @click="addPersonServer">添加一个随机名字</button>
  <ul>
    <li v-for="p in personList" :key="p.id">{{p.name}}</li>
  </ul>
</div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
name: "Person",
  data(){
  return{
    name:''
  }
  },
  computed:{
  ...mapState('countOptions',['sum']),
    ...mapState('personOptions',['personList']),
    ...mapGetters('personOptions',['firstPersonName'])
  },
  methods:{
    ...mapMutations('personOptions',{add:'ADD_PERSON'}),
    ...mapActions('personOptions',['addPersonWang','addPersonServer'])
  }
}
</script>

<style scoped>

</style>